<template>
        <div class="collect">

                <!-- 顶部导航 -->
                <van-nav-bar title="我的收藏"
                             left-text="返回"
                             right-text="..."
                             left-arrow
                             @click-left="$router.go(-1)" />
                <!-- 收藏列表 -->
                <div class="shoplist">
                        <!-- <div @click="toDetail(item)" class="shop" v-for="(item,index) in $store.state.collectlist" :key="index"> -->
                        <div @click="toDetail(item)"
                             class="shop"
                             v-for="(item,index) in collectlist"
                             :key="index">
                                <div class="imgbox">
                                        <img :src="item.picUrl"
                                             alt="">
                                </div>
                                <div class="text">
                                        <div class="name">{{item.name}}</div>
                                        <div class="sale"> ☆ {{item.wmPoiScore}} {{item.monthSalesTip}}</div>
                                        <div class="desc">{{item.minPriceTip}} {{item.shippingFeeTip}}</div>
                                </div>
                        </div>
                        <!-- <div v-if="$store.state.collectlist.length == 0" class="empty"> -->
                        <div v-if="collectlist.length == 0"
                             class="empty">
                                未收藏任何店铺,<span @click="$router.push('/home/shouye')">去逛逛</span>
                        </div>
                </div>
        </div>
</template>

<script>
//导入vuex中的工具函数(辅助函数) , 使用该工具函数 简化vuex在组件中的应用
import { mapState } from 'vuex'

export default {
        computed: {
                //mapState()这个工具函数 会将vuex中的数据 映射到组件的computed中.
                ...mapState(['collectlist'])
        },
        methods: {
                toDetail (item) { //跳转到详情页
                        this.$router.push('/detail/' + item.mtWmPoiId);
                }
        }
}
</script>

<style lang='scss' scoped>
.shoplist {
        margin: 10px;
        .shop {
                display: flex;
                margin: 10px 0;
                .imgbox {
                        width: 80px;
                        margin-right: 10px;
                        img {
                                width: 100%;
                        }
                }
                .text {
                        font-size: 12px;
                }
        }

        .empty {
                text-align: center;
                padding: 50px 0;
                span {
                        color: red;
                }
        }
}
</style>